import React from 'react';
import { Toast, } from 'antd-mobile';
import { Empty } from 'antd';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			tel: '',
            pwd: '',
			active: false,
			code:'',
        }
    }
	componentDidMount(){
		document.title = '登录';

	 var code = this.GetQueryValue('code');
		var local = window.location.href;

		let openid = localStorage.getItem('openid');
		if (!openid) {
			if(code){
				global.Ajax.hhtc_request("login/index",{code:code}).then(data=>{
					if (data.code == 1) {
						localStorage.setItem('openid',data.data.openid);
						localStorage.setItem("token",data.data.token)
						localStorage.setItem("uid",data.data.uid)
						this.props.history.replace("/home/home/index")
					}
					else {
						window.location.href = data.data;
					}
				})
			}else{
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx54a099859f2845a9&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
			}
		} 
	}
	GetQueryValue(queryName) {
		var query = decodeURI(window.location.search.substring(1));
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
		  var pair = vars[i].split("=");
		  if (pair[0] == queryName) {
			return pair[1];
		  }
		}
		return null;
	}
	
	// 登录
	login(){
		 if(this.state.tel.length!==11){
			return Toast.fail('请输入账号!', 1);
		}
		if(this.state.pwd.length<6||this.state.pwd.length>16){
			return Toast.fail('密码长度为6-16位!', 1);
		}
		if(!this.state.active){
			return Toast.fail('请勾选协议!',1)
		}
		Toast.loading()
		var req={
			phone: this.state.tel,
			password: this.state.pwd,
		}
		global.Ajax.hhtc_request("login/login",req).then(data=>{
			Toast.hide()
			if(data.code===1){
				Toast.success(data.msg,1,()=>{
					localStorage.setItem("token",data.data.token)
					localStorage.setItem("uid",data.data.uid)
					this.props.history.replace("/home/home/index")
				})
			}else{
				Toast.fail(data.msg, 1);
			}
		})
	}
	render(){
		return(
			<div className='login'>
                <img src={require('../imgs/logo.png')} className='logo' />
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/tel.png')} className='login_icon' />
					<input onChange={(e)=>{
                        this.setState({
                            tel: e.target.value
                        })
                    }} type='tel' maxLength={11} placeholder='请输入账号' className='login_inpt' />
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/pwd.png')} className='login_icon' />
					<input onChange={(e)=>{
						this.setState({
							pwd: e.target.value,
						})
					}} type='password' placeholder='请输入密码' className='login_inpt' />
				</div>
                <div className='flex'>
                    <p className='go_reg' onClick={()=>{
                        this.props.history.push('/login/login/reg')
                    }}>立即注册</p>
                    <p className='go_forget' onClick={()=>{
                        this.props.history.push('/login/login/forget')
                    }}>忘记密码？</p>
                </div>
				<p className='login_sub_btn' onClick={this.login.bind(this)}>登录</p>
                <div className='xiey'>
                    <span className={`${this.state.active?'active':''}`} onClick={()=>{
                        this.setState({
                            active: !this.state.active
                        })
                    }}></span>
                    <p>请先阅读并同意<span onClick={()=>{this.props.history.push('/login/login/agreement')}}>《用户隐私协议》</span></p>
                </div>
			</div>
		)
	}
}
